為什麼需要 Media Queries

Media queries 可以讓我們依據不同裝置的特性來調整網頁應用程式。

什麼是 Media Queries？

Media Queries 的組成

@media [Media Type] ([Media Feature]) [Operators] ([Media Feature])
ex: @media screen (min-width: 320px) and (max-width: 768px)

@media 是 CSS 的其中一種 At-Rule，At-Rule 指令的用途是聲明 CSS 該如何呈現樣式，如果滿足媒體查詢的條件就會生效。

@media (RULE)

Media Type 目標的媒體類型，多數情況下會直接使用 screen

Media Feature 匹配的規則

Operators Media 支援邏輯運算子

• and
• or (comma-separated)
• not

Use Case

Mobile First

html { 
  background: red;
}

@media (min-width: 600px) {
  html { 
    background: green;
  }
}

@media (min-width: 800px) {
  html { 
    background: blue;
  }
}

Device's Orientation

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

參考資料

CSS Syntax
The At-Rules of CSS
A Complete Guide to CSS Media Queries
Media Queries Level 4